<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <th:block th:include="include :: header('个人中心')"/>
  <link rel="stylesheet" href="../../admin/css/other/person.css"/>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
  <div class="layui-col-md3">
    <div class="layui-card">
      <div class="layui-card-body" style="padding: 25px;">
        <div class="text-center layui-text">
          <div class="user-info-head" id="userInfoHead">
            <img src="../../admin/images/avatar.jpg" width="115px" height="115px" alt="">
          </div>
          <h2 style="padding-top: 20px;font-size: 20px;" th:text="${userInfo.realName}"></h2>
          <p style="padding-top: 8px;margin-top: 10px;font-size: 13.5px;">China ， 中国</p>
        </div>
      </div>
      <div style="height: 45px;border-top: 1px whitesmoke solid;text-align: center;line-height: 45px;font-size: 13.5px;">
        <span>今日事 ，今日毕</span>
      </div>
    </div>
    <div class="layui-card">
      <div class="layui-card-header">
        操作记录
      </div>
      <div class="layui-card-body">
        <ul class="list">
          <li class="list-item"><span class="title">优化代码格式</span><span class="footer">2020-06-04 11:28</span>
          </li>
          <li class="list-item"><span class="title">新增消息组件</span><span class="footer">2020-06-01 04:23</span>
          </li>
          <li class="list-item"><span class="title">移动端兼容</span><span class="footer">2020-05-22 21:38</span>
          </li>
          <li class="list-item"><span class="title">系统布局优化</span><span class="footer">2020-05-15 14:26</span>
          </li>
          <li class="list-item"><span class="title">兼容多系统菜单模式</span><span class="footer">2020-05-13 16:32</span>
          </li>
          <li class="list-item"><span class="title">兼容多标签页切换</span><span class="footer">2019-12-9 14:58</span>
          </li>
          <li class="list-item"><span class="title">扩展下拉组件</span><span class="footer">2019-12-7 9:06</span>
          </li>
          <li class="list-item"><span class="title">扩展卡片样式</span><span class="footer">2019-12-1 10:26</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="layui-col-md9">
    <div class="layui-card">
      <div class="layui-card-header">个人信息</div>
      <div class="layui-card-body">
        <div class="layui-tab layui-tab-brief">
          <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
              <br>
              名称&nbsp; : &nbsp;<span th:text="${userInfo.realName}"></span>
              <br>
              <br>
              账户&nbsp; : &nbsp;<span th:text="${userInfo.username}"></span>
              <br>
              <br>
              住址&nbsp; : &nbsp;<span> 中国 &nbsp;&nbsp;济南&nbsp;&nbsp; 高新区 </span>
              <br>
              <br>
              手机&nbsp; : &nbsp;<span th:text="${userInfo.phone}"></span>
              <br>
              <br>
              简介&nbsp; : &nbsp;<span th:text="${userInfo.remark}"></span>
              <br>
              <br>
              <br>
              <button class="layui-btn layui-btn-normal layui-btn-sm layui-hide" style="background-color: #5FB878;">
                修改资料
              </button>
              <button class="layui-btn layui-btn-primary layui-btn-sm editPassword">更改密码</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-card layui-hide">
      <div class="layui-card-header">
        我的文章
      </div>
      <div class="layui-card-body">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
          <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
              <div class="layui-row layui-col-space10" style="margin: 15px;">
                <div class="layui-col-md1">
                  <img src="../../admin/images/act.jpg"
                       style="width: 100%;height: 100%;border-radius: 5px;"/>
                </div>
                <div class="layui-col-md11" style="height: 80px;">
                  <div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
                  <div class="content">
                    “Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
                  </div>
                  <div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发
                    4
                  </div>
                </div>
              </div>
              <div class="layui-row layui-col-space10" style="margin: 15px;">
                <div class="layui-col-md1">
                  <img src="../../admin/images/act.jpg"
                       style="width: 100%;height: 100%;border-radius: 5px;"/>
                </div>
                <div class="layui-col-md11" style="height: 80px;">
                  <div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
                  <div class="content">
                    “Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
                  </div>
                  <div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发
                    4
                  </div>
                </div>
              </div>
              <div class="layui-row layui-col-space10" style="margin: 15px;">
                <div class="layui-col-md1">
                  <img src="../../admin/images/act.jpg"
                       style="width: 100%;height: 100%;border-radius: 5px;"/>
                </div>
                <div class="layui-col-md11" style="height: 80px;">
                  <div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
                  <div class="content">
                    “Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
                  </div>
                  <div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发
                    4
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<th:block th:include="include :: footer"/>
<script>
  layui.use(['element', 'jquery', 'layer'], function () {
    let $ = layui.jquery;
    let layer = layui.layer;

    $(".editPassword").click(function () {
      layer.open({
        type: 2,
        title: '修改密码',
        shade: 0.1,
        area: ['550px', '280px'],
        content: '/system/user/editPassword'
      });
    })
  })
</script>
</body>
</html>
